<template>
	<div class="box" >
		<test4 
			v-for="(item, index) in pageTree.test4"
			:key="index" 
			v-sdrag:real="{id: item.id, com: item.id}">
		</test4>
        <test2 
			v-for="(item, index) in pageTree.test2"
			:key="index" 
			v-sdrag:real="{id: item.id, com: item.id}">
		</test2> 
	</div>

</template>

<script>
import test4 from "../../real-components/Test4";
import test2 from "../../real-components/Test2";
import {mapGetters} from "vuex";
import {getPageTree, initDomTree} from "../../utils/getPageTree";
export default {
  	name: 'hello',
  	data () {
    	return {
			msg: '这是测试首页',
			// pageTree: [],
			page: "test"
		}
	},
	computed: {
		...mapGetters([
			"com1Data",
			"com2Data",
			"getDomTree"
		]),
		pageTree () {
			return getPageTree(this, "test");
		}
	},
	components: {
        test4,
        test2
	},
	created () {
		
	},
	mounted () {
		// initDomTree(this.$store.getters.getDomTree.test);
		initDomTree(this.getDomTree[this.page]);
		
	},
	updated() {
		//页面更新完毕
		console.log("页面更新完毕");
		// setTimeout(() => {
		
		// initDomTree(this.$store.getters.getDomTree.test);
		initDomTree(this.getDomTree[this.page]);
		// }, 50);
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.box {
		/* display: flex; */
	}
	.style-components {
		display: flex;
		flex-flow: column nowrap;
	}
	.container {
		width: 800px;
		height: 300px;
		border: 1px solid red;

	}
</style>
